<script>
	import tags from "./tags.vue"
	import imageUpload from "@/components/imageUpload.vue"
	import Header from "@/components/Header.vue"
	import addressPicker from "@/components/address-picker2.vue"

	export default {
		components: {
			Header,
			tags,
			imageUpload,addressPicker
		},
		props: {
			editData: {
				type: Object,
				default: {}
			},
			tabIndex: {
				type: Number,
				default: 0
			},
			dataArr: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {
				title: "编辑信息",
				school: [],
				company: [],
				// tabIndex: 0,
				imageList: [],
				seek_type_id: '',
				set_flag: true,
				default_address:'请选择所在地区',
				fbxrtscword:'',
				sub: {
					sex: 1,
					name: '',
					age: '',
					seek_address: '',
					seek_address_two: '',
					is_tk_type: 2,
					label_id: '',
					z_label_id: '',
					seek_school: '',
					seek_school_two: '',
					seek_company: '',
					seek_company_two: '',
					seek_img_str: '',
					seek_content: '',
					seek_type: '',
					seek_phone: uni.getStorageSync('wx_phone')||'',
					seek_money: '',
					sheng:'',
					city:'',
					qu:'',
					sheng_name:'',
					city_name:'',
					qu_name:'',
					area_code:''
				},

			}
		},

		mounted() {
			console.log(this.dataArr)
			if (this.dataArr) {
				if(this.dataArr.list){
					if(this.dataArr.list[0]){
						this.sub.label_id = this.dataArr.list[0].label_id
						this.seek_type_id = this.dataArr.list[0].label_id
					}
				}
			}


			console.log(this.editData);
			if (this.editData.seek_id) {
				console.log("!!!", this.editData);
				this.sub = this.editData
				this.sub.area_code = this.editData.area_code
				this.sub.sheng_name= this.editData.sheng_name
				this.sub.city_name=this.editData.city_name
				this.sub.qu_name=this.editData.qu_name
				
				if(this.sub.qu_name){
					this.default_address = this.sub.sheng_name+' '+this.sub.city_name+' '+this.sub.qu_name
				}
				
				
				if(this.sub.area_code){
					var area_code = this.sub.area_code
					var area_arr = area_code.split(",")
					if(area_arr){
						this.sub.sheng = area_arr[0]
						this.sub.city = area_arr[1]
						this.sub.qu = area_arr[2]
					}
				}
				
				this.sub.sex = this.editData.seek_sex
				this.sub.name = this.editData.seek_name
				this.sub.age = this.editData.seek_age
				this.sub.seek_sex = this.editData.seek_sex
				this.sub.seek_name = this.editData.seek_name
				this.sub.seek_age = this.editData.seek_age
				this.sub.seek_type = this.editData.seek_type
				this.sub.seek_address_two = this.editData.seek_address_two
				this.sub.seek_address = this.editData.seek_address
				this.sub.seek_school = this.editData.seek_school
				this.sub.seek_school_two = this.editData.seek_school_two
				this.sub.seek_company = this.editData.seek_company
				this.sub.seek_company_two = this.editData.seek_company_two
				
				console.log("!!!", this.sub);
				
				
				this.imageList = this.editData.seek_img_arr.map(item => ({
					url: item
				}))
			}

			if (this.seek_type_id) {
				this.sub.seek_type = this.seek_type_id
			}

			if (this.sub.seek_type) {
				this.seek_type_id = this.sub.seek_type
			}

			if(uni.getStorageSync('Gzinfo')){
				var Gzinfo = uni.getStorageSync('Gzinfo')
				this.fbxrtscword = Gzinfo.fbxrtscword
			}

		},
		
		
		
		
		methods: {
			handleAddressChange(e){
				console.log(e)
				if(e.codes){
					this.sub.sheng = e.codes.provinceCode
					this.sub.city = e.codes.cityCode
					this.sub.qu = e.codes.areaCode
				}else{
					this.sub.sheng = ''
					this.sub.city = ''
					this.sub.qu = ''
				}
				
				
				
				var names = e.names
				if(names){
					var name_arr = names.split(' ')
					this.sub.sheng_name= name_arr[0]||''
					this.sub.city_name=name_arr[1]||''
					this.sub.qu_name=name_arr[2]||''
				}else{
					this.sub.sheng_name = ''
					this.sub.city_name = ''
					this.sub.qu_name = ''
				}
				
				console.log(this.sub.sheng,this.sub.city,this.sub.qu)
			},
			imgFn(e) {
				this.imageList = e
				var that = this
				var str = ''
				for (var i = 0; i < that.imageList.length; i++) {
					str += that.imageList[i].url + ','
				}
				this.sub.seek_img_str = str.replace(/^,+|,+$/g, '');
			},
			submit() {
				this.sub.seek_sex = this.sub.sex
				this.sub.seek_name = this.sub.name
				this.sub.seek_age = this.sub.age
				this.$emit("submit", this.sub)
			},
			save() {
				this.$emit("save", this.sub)
			},
			add(str) {
				if (str == 'school') {
					this.school.push({
						val: ''
					})
				} else {
					this.company.push({
						val: ''
					})
				}
				console.log(this.school);
			},
			yichu(item, index, str) {
				if (str == 'school') {
					this.school.splice(index, 1);
				} else {
					this.company.splice(index, 1);
				}
			},
			seek_type(i) {
				this.seek_type_id = i
				this.sub.seek_type = i
			},
			set_sex(i) {
				this.set_flag = false
				this.sub.sex = i
				this.set_flag = true

				console.log(this.sub.sex)
			},
			is_tk(i) {
				this.sub.is_tk_type = i
			},
			update(type, i) {
				console.log(i)
				if (type == 'label_id') {
					this.sub.label_id = i
				} else {
					this.sub.z_label_id = i
				}
				console.log(this.sub)
			},
			getphonenumber (e) {
				var that = this
				that.loading = false
			    uni.request({
					url: getApp().globalData.host + '/api/My/wxSetMyPhone',
					data: {
						code: e.detail.code,
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						uni.setStorageSync('wx_phone',r.data.data.wx_phone)
						that.sub.seek_phone = r.data.data.wx_phone
						that.loading = true
					},
				})
			},
			validateInput(event) {
			  let value = Number(event.target.value);
			  var that = this
			  that.$nextTick(() => {
				if (value < 0) {
					that.sub.age = 0; // 最小值限制
				} else if (value > 100) {
					that.sub.age = 100; // 最大值限制
				} else {
					that.sub.age = value; // 正常赋值
				}  
				
				that.$set(that.sub,"age",that.sub.age)
				
				that.$emit('listUpdate',{'type':'age','value':event.target.value});


			  })
			},
			
			handleInput(event) {
			  // 正则表达式校验：最多4个中文字符
			  const regex = /^[\u4e00-\u9fa5]{0,4}$/;
			  var that = this
			  that.$nextTick(() => {
				  if (!regex.test(event.target.value)) {
					// 如果不匹配，则重置为之前的值或截取前4个字符
					that.sub.name = that.sub.name.slice(0, 4);
				  } else {
					that.sub.name = event.target.value;
				  }
				  
				  that.$set(that.sub,"name",that.sub.name)
				  
				  that.$emit('listUpdate',{'type':'name','value':event.target.value});
			  })
			},
			
			
			
		}
	}
</script>
<template>
	<div>


		<div v-if="tabIndex == 0 && !editData.me_nick_name" v-show="!editData.seek_id"
			class="fz30 text-gray-16 mt-37 mb-23">标签</div>

		<!-- {{sub}} -->

		<tags :index="1" :dataArr="dataArr" @update="update" :tabIndex="tabIndex" :editData="editData" />

		<div class="line mt-40 mb-40" v-if="tabIndex == 0 && !editData.me_nick_name"></div>

		<div class="fz30 text-gray-16 mt-37 mb-30">基本信息(必填)</div>

		<div class="flex" v-if="set_flag==true">
			<input style="display: none;" class="fz22 h-full w-full pt-5" v-model="sub.sex">
			<div class="flex" @click="set_sex(1)">
				<image @click="set_sex(1)" :src="sub.sex == 1?'/static/publish/radios.png':'/static/publish/radio.png'"
					mode="widthFix" class="w-30"></image>
				<div @click="set_sex(1)" class="fz30 text-gray-16 ml-11">男</div>
			</div>
			<div class="flex ml-50" @click="set_sex(2)">
				<image @click="set_sex(2)" :src="sub.sex == 2?'/static/publish/radios.png':'/static/publish/radio.png'"
					mode="widthFix" class="w-30"></image>
				<div @click="set_sex(2)" class="fz30 text-gray-16 ml-11">女</div>
			</div>
			<!-- <div class="flex ml-50" @click="set_sex(3)" v-if="sub.label_id==8">
				<image @click="set_sex(3)" :src="sub.sex == 3?'/static/publish/radios.png':'/static/publish/radio.png'"
					mode="widthFix" class="w-30"></image>
				<div @click="set_sex(3)" class="fz30 text-gray-16 ml-11">不限</div>
			</div> -->
		</div>

		<div class="custom-input mt-30">
			
			<div v-if="tabIndex==0" class="fz30 text-gray-16 mr-30 flex-shirnk-0"><text>{{sub.label_id=='8'?'寻人方向':'被寻人姓名'}}</text></div>
			<div v-if="tabIndex==1" class="fz30 text-gray-16 mr-30 flex-shirnk-0"><text>我的资源姓名</text></div>
			
			<input v-if="tabIndex==0" type="text" @input="handleInput"  class="fz22 h-full w-full pt-5" :placeholder="sub.label_id=='8'?'请输入寻人方向':'请输入对方姓名'" v-model="sub.name">
			<input v-if="tabIndex==1" type="text" @input="handleInput"  class="fz22 h-full w-full pt-5" :placeholder="'请输入我的资源姓名'" v-model="sub.name">
			
		</div>

		<div class="custom-input mt-18">
			<div v-if="tabIndex==0" class="fz30 text-gray-16 mr-30 flex-shirnk-0">被寻人年龄</div>
			<div v-if="tabIndex==1" class="fz30 text-gray-16 mr-30 flex-shirnk-0">我的资源年龄</div>
			
			<input v-if="tabIndex==0" type="number" maxlength="100"  :min="0" :max="100" @input="validateInput"  class="fz22 h-full w-full  pt-5" placeholder="请输入对方年龄 (限制100岁以内)"
				v-model="sub.age">
			<input v-if="tabIndex==1" type="number" maxlength="100"  :min="0" :max="100" @input="validateInput"  class="fz22 h-full w-full  pt-5" placeholder="请输入年龄 (限制100岁以内)"
					v-model="sub.age">
		</div>
		
		<div class="custom-input mt-18" v-if="tabIndex==0">
			<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">被寻人所在地区</div>
			<addressPicker
			  @addressChange="handleAddressChange"
			  :placeholder="default_address"
			/>
		</div>
		
		<div class="custom-input mt-30" v-if="tabIndex==0">
			<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">{{sub.label_id=='8'?'需求地址':'被寻人详细地址'}}</div>
			<input type="text" maxlength="50" class="fz22 h-full w-full  pt-5" :placeholder="sub.label_id=='8'?'请输入需求地址':'请输入对方详细地址 (非必填)'"
				v-model="sub.seek_address">
		</div>

		<div class="line"></div>


		<div class="fz30 text-gray-16 mt-37 mb-30">更多信息(非必填)</div>

		
		<div class="custom-input mt-30" v-if="tabIndex==1">
			<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">资源覆盖范围</div>
			<input type="text" maxlength="50" class="fz22 h-full w-full  pt-5" placeholder="例如:全国/XX省/XX市/XX区"
				v-model="sub.seek_address">
		</div>
		<div class="custom-input mt-30" v-if="tabIndex==1">
			<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">资源覆盖方向</div>
			<input type="text" maxlength="50" class="fz22 h-full w-full  pt-5" placeholder="例如:教育/医疗/人脉/等"
				v-model="sub.seek_address_two">
		</div>

		<div class="between mt-18">
			<div class="custom-input">
				<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">学校</div>
				<input type="text" maxlength="20" class="fz22 h-full w-full  pt-5" placeholder="请输入对方学校 (限制20字以内)"
					v-model="sub.seek_school">
			</div>
			<div class="custom-input flex-col center w-135 ml-15" @click="add('school')">
				<image src="/static/publish/add.png" class="w-40" mode="widthFix"></image>
				<div class="fz24 text-gray-16">添加</div>
			</div>
		</div>
		<div class="between mt-18" v-show="school.length != 0">
			<div class="custom-input">
				<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">学校</div>
				<input type="text" maxlength="20" class="fz22 h-full w-full  pt-5" placeholder="请输入对方学校 (限制20字以内)"
					v-model="sub.seek_school_two">
			</div>
			<div class="custom-input flex-col center w-135 ml-15" @click="yichu(item, index, 'school')">
				<image src="/static/publish/del.png" class="w-40" mode="widthFix"></image>
				<div class="fz24 text-gray-16">移除</div>
			</div>
		</div>
		<div class="between mt-18">
			<div class="custom-input">
				<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">公司</div>
				<input type="text" maxlength="20" class="fz22 h-full w-full  pt-5" :placeholder="tabIndex==0?'请输入对方公司 (限制20字以内)':'请输入对方所任职公司名称'"
					v-model="sub.seek_company">
			</div>
			<div class="custom-input flex-col center w-135 ml-15" @click="add('company')">
				<image src="/static/publish/add.png" class="w-40" mode="widthFix"></image>
				<div class="fz24 text-gray-16">添加</div>
			</div>
		</div>
		<div class="between mt-18" v-show="company.length != 0">
			<div class="custom-input">
				<div class="fz30 text-gray-16 mr-30 flex-shirnk-0">公司</div>
				<input type="text" maxlength="20" class="fz22 h-full w-full  pt-5" :placeholder="tabIndex==0?'请输入对方公司 (限制20字以内)':'请输入对方所任职公司名称'"
					v-model="sub.seek_company_two">
			</div>
			<div class="custom-input flex-col center w-135 ml-15" @click="yichu(item, index, 'company')">
				<image src="/static/publish/del.png" class="w-40" mode="widthFix"></image>
				<div class="fz24 text-gray-16">移除</div>
			</div>
		</div>

		<block v-if="tabIndex == 0">
			<div class="line"></div>

			<div class="fz30 text-gray-16 mt-37 mb-30">添加图片(仅可添加3张)</div>
			<imageUpload :list="imageList" :maxCount="3" @change="imgFn"></imageUpload>

			<div class="flex flex-wrap" style="display: none;">
				<div class="relative mr-10 overflow-hidden w-160 h-160" style="border-radius: 22rpx;" v-for="item in 3">
					<div class="absolute r-0 t-0 z-10 w-45 h-45 bg-black-2 center"
						style="border-bottom-left-radius: 12rpx;">
						<image src="/static/publish/del2.png" mode="widthFix" class="w-25 h-25"></image>
					</div>
					<image src="/static/logo.png" mode="aspectFill" class="w-160 h-160"></image>
				</div>

				<div class="relative mr-10 center overflow-hidden w-160 h-160"
					style="border-radius: 22rpx;background-color: #F8F8F8;">
					<image src="/static/publish/photo.png" mode="widthFix" class="w-45"></image>
				</div>
			</div>
			<div class="line mt-37"></div>

			<div class="fz30 text-gray-16 mt-37 mb-30">信息描述</div>

			<div style="background-color: #F8F8F8;box-sizing: border-box;" class="w-full rounded-22 p-30">
				<textarea style="height: 300rpx;line-height: 50rpx;" placeholder="输入其他信息" class="w-full h-full"
					v-model="sub.seek_content" maxlength="150"></textarea>
				<div class="fz26 text-gray-16 " style="text-align: right;">{{ sub.seek_content.length }}/150</div>
			</div>

			<div class="line mt-37"></div>

			<div class="fz30 text-gray-16 mt-37 mb-30">我的需求</div>

			<div class="tab2 mb-25 flex flex-wrap">
				<div v-for="(item, index) in dataArr.seek_type_list" @click="seek_type(item.seek_type)"
					style="margin-top:20rpx;border-radius: 10rpx;" class="item fz26 text-gray-16 w-150"
					:class="item.seek_type == seek_type_id ? 'active' : ''">
					{{ item.seek_type_name }}
				</div>
				<!-- 			<div class="item fz26 text-gray-16">了解对方生活状态</div> -->
			</div>

			<div class="custom-input mt-18" style="position: relative;">
				<div class="fz30 text-gray-16 mr-30 flex-shirnk-0 w-120">联系方式</div>
				<input type="number" maxlength="11" :disabled="true" class="fz22 h-full w-full  pt-5" placeholder="仅自己可见不对外显示"
					v-model="sub.seek_phone">
				<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" style="width: 100px; z-index: 1111; border-radius: 5px; line-height:35px; height: 35px;position: absolute; left: 70%;top: 10%;">
					<view class="wechat_img" style="font-size: 12px;">
						<!-- <image src="@/static/phone.png" mode=""></image> -->
						授权手机号
					</view>
				</button>
			</div>

			<div class="between mt-18" v-if="!editData.seek_id">
				<div class="custom-input " v-if="dataArr&&dataArr.list.length>0&&sub.label_id">

					<div class="fz30 text-gray-16 mr-30 flex-shirnk-0 w-120">茶水费</div>

					<input type="number" class="fz22 h-full w-full  pt-5"
						:placeholder="'最低'+(dataArr.list.find(item=>item.label_id==sub.label_id).min_money)+'元起'"
						v-model="sub.seek_money">
				</div>
				<div class="flex flex-col back">
					<div class="item" @click="is_tk(1)" :class="sub.is_tk_type == 1 ? 'active' : ''">自动退款</div>
					<div class="item" @click="is_tk(2)" :class="sub.is_tk_type != 1 ? 'active' : ''">手动退款</div>
				</div>
			</div>

			<div class="fz22 text-gray-900 pl-25 pt-20" v-if="!editData.seek_id">
				{{fbxrtscword}}
			</div>


			<div class="line mt-35"></div>
			<div class="bg-purple center h-90 rounded-50 mt-35 fz30 text-white" @click="submit">
				提交
			</div>
		</block>

		<block v-if="tabIndex == 1">
			<div class="line mt-35"></div>
			<div class="bg-purple center h-90 rounded-50 mt-35 fz30 text-white" @click="save">
				保存
			</div>
		</block>


	</div>
</template>


<style lang="less">
	.back {
		width: 135rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-self: stretch;
		margin-left: 20rpx;

		.item {
			width: 100%;
			border-radius: 8rpx;
			border: 4rpx solid #AC5FF8;
			color: #AC5FF8;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 42rpx;
		}

		.active {
			background-color: #AC5FF8;
			color: #fff;
		}
	}

	.tab2 {
		display: flex;
		justify-content: space-between;

		.item {
			height: 74rpx;
			width: 330rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F2F2F2;
		}

		.active {
			background-color: #AC52FA;
			color: #fff;
		}
	}
</style>